<template>
	<div>
		<div class="overlay nav-btm">
			<div class="overlay-content scrolling">
				<div style="padding: 10px 0px;">
					<van-tabs type="card" @change="getTab">
						<van-icon :name="imgUrl" size="25" @click="getIcon" />
						<div style="margin-top: 10px;">
							<van-tab title="我要买入">
								<van-tabs swipeable v-model="active" class="buy">
									<van-tab title="AIDT">
										<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
											<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
												<div style="padding: 0px 10px;" v-for="item in list" :key="item.id">
													<van-card>
														<div slot="thumb">
															<div align="center" style="width: 25px;height: 25px;background-color:rgb(48,198,148);color: white;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;">
																<span style="line-height: 25px;" v-text="item.otcName.substr(0, 1)">李</span>
															</div>
														</div>
														<div slot="title" style="font-size: 15px;" class="pad">
															<span v-text="item.otcName"></span>
															<span style="padding-left: 5px;">
																<img src="../assets/images/zf1.png" width="23" height="23" v-if="item.payChain.includes('2')" />
																<img src="../assets/images/zf2.png" width="23" height="23" v-if="item.payChain.includes('1')" />
																<img src="../assets/images/zf3.png" width="23" height="23" v-if="item.payChain.includes('0')" />
															</span>
														</div>
														<div slot="desc" style="color: #858dac;">
															<div class="pad">
																<span>交易笔数</span>
																<span v-text="item.transactionNumber">100</span>
															</div>
															<div class="pad">
																<span>数量</span>
																<span v-text="item.residueNum">100.0000</span>
																<span>AIDT</span>
															</div>
															<div class="pad">
																<span>限额</span>
																<span v-text="item.minNum">200</span>
																<span>-</span>
																<span v-text="item.maxNum">500</span>
																<span>CNY</span>
															</div>
														</div>
														<div slot="num" align="right">
															<span style="color: #858dac;">单价</span>
															<div style="font-size: 15px;padding-top: 5px;">
																<span v-text="item.unitPrice">7.0000</span>
																<span>CNY</span>
															</div>
															<van-button round size="small" class="van-button--info" @click="getBuy(0,item)">买入</van-button>
														</div>
													</van-card>
												</div>
											</van-list>
										</van-pull-refresh>
									</van-tab>
								</van-tabs>
							</van-tab>
						</div>
						<van-tab title="我要卖出">
							<van-tabs swipeable v-model="active2" class="unbuy">
								<van-tab title="AIDT">
									<van-pull-refresh v-model="isLoading2" @refresh="onRefresh2">
										<van-list v-model="loading2" :finished="finished2" finished-text="没有更多了" @load="onLoad2">
											<div style="padding: 0px 10px;" v-for="item in list2" :key="item.id">
												<van-card>
													<div slot="thumb">
														<div align="center" style="width: 25px;height: 25px;background-color:rgb(48,198,148);color: white;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;">
															<span style="line-height: 25px;" v-text="item.otcName.substr(0, 1)">林</span>
														</div>
													</div>
													<div slot="title" style="font-size: 15px;" class="pad">
														<span v-text="item.otcName"></span>
														<span style="padding-left: 5px;">
															<img src="../assets/images/zf1.png" width="23" height="23" v-if="item.payChain.includes('2')" />
															<img src="../assets/images/zf2.png" width="23" height="23" v-if="item.payChain.includes('1')" />
															<img src="../assets/images/zf3.png" width="23" height="23" v-if="item.payChain.includes('0')" />
														</span>
													</div>
													<div slot="desc" style="color: #858dac;">
														<div class="pad">
															<span>交易笔数</span>
															<span v-text="item.transactionNumber">100</span>
														</div>
														<div class="pad">
															<span>数量</span>
															<span v-text="item.residueNum">100.0000</span>
															<span>AIDT</span>
														</div>
														<div class="pad">
															<span>限额</span>
															<span v-text="item.minNum">200</span>
															<span>-</span>
															<span v-text="item.maxNum">500</span>
															<span>CNY</span>
														</div>
													</div>
													<div slot="num" align="right">
														<span style="color: #858dac;">单价</span>
														<div style="font-size: 15px;padding-top: 5px;">
															<span v-text="item.unitPrice">7.0000</span>
															<span>CNY</span>
														</div>
														<van-button round size="small" class="van-button--danger" @click="getBuy(1,item)">卖出</van-button>
													</div>
												</van-card>
											</div>
										</van-list>
									</van-pull-refresh>
								</van-tab>
							</van-tabs>
						</van-tab>
					</van-tabs>
				</div>
			</div>
		</div>
		<van-popup v-model="show" class="menu">
			<div style="padding: 5px 10px 5px 5px;" @click="orderRecord">
				<img src="../assets/images/gs1.png" width="20" height="20" style="padding-bottom: 3px;" />
				<span>订单记录</span>
			</div>
			<div style="padding: 5px 10px 5px 5px;" @click="merchantOrder" v-if="centerType == 1">
				<img src="../assets/images/gs2.png" width="20" height="20" style="padding-bottom: 3px;" />
				<span>商家订单</span>
			</div>
		</van-popup>
		<van-popup v-model="show2" position="bottom" class="buym" @close="choseShow">
			<div style="padding: 10px 20px;">
				<span v-text="typeShow">买入</span>
				<span>AIDT</span>
				<div style="font-size: 14px;color: rgb(133, 141, 172);">
					<span>单价</span>
					<span v-text="arrayList.unitPrice">8.0000</span>
				</div>
			</div>
			<div style="background: rgb(40,44,62);padding: 10px 20px;">
				<van-tabs v-model="active3" class="buyc" title-active-color="rgb(71, 170, 105)" title-inactive-color="rgb(133, 141, 172)">
					<van-tab :title="'按数量' + typeShow">
						<van-field :placeholder="'请输入要'+ typeShow +'的数量'" maxlength="10" v-model.trim="num" @input="giveNum">
							<van-button slot="button" size="small" plain hairline type="primary" @click="give">
								<span style="color: rgb(133, 141, 172);padding-right: 5px;">枚</span>
								<span style="border-left: 2px solid rgb(133, 141, 172);padding-right: 7px;"></span>
								<span style="color: rgb(71, 170, 105);" v-if="type == 0">全部收购</span>
								<span style="color: rgb(71, 170, 105);" v-if="type == 1">全部出售</span>
							</van-button>
						</van-field>
						<div style="color: rgb(133, 141, 172);font-size: 13px;padding-left: 5px;padding-top: 10px;">
							<span>剩余</span>
							<span>
								<span v-text="arrayList.residueNum">200</span>
							<span>枚</span>
							</span>
						</div>
						<div style="color: rgb(133, 141, 172);padding-top: 25px;font-size: 13px;padding-left: 5px;">
							<span>交易总额</span>
							<span style="float: right;">￥<span v-text="price"></span></span>
						</div>
						<div align="center" style="padding-top: 10px;">
							<van-row gutter="20">
								<van-col span="12">
									<van-button size="normal" style="background: #2c3145;border-color: #2c3145;color: rgb(133, 141, 172);border-radius: 5px;" @click="quitDown">{{ countdown }}秒后自动取消</van-button>
								</van-col>
								<van-col span="12">
									<van-button size="normal" :disabled="arrayList.residueNum > 0 ? false : true" class="van-button--info" style="border-radius: 5px;" @click="sure">下单</van-button>
								</van-col>
							</van-row>
						</div>
					</van-tab>
				</van-tabs>
			</div>
		</van-popup>
		<van-popup v-model="show3" position="bottom" class="buyo" @close="choseShow">
			<div style="padding: 15px 25px;color: #3fb776;">
				<span>安全验证</span>
				<span style="font-size: 14px;color: rgb(133, 141, 172);float: right;padding-top: 3px;" @click="quit">取消</span>
			</div>
			<div style="background: rgb(40,44,62);padding: 10px 20px;">
				<div style="font-size: 14px;color: rgb(133, 141, 172);padding-bottom: 10px;">XIBRUSH资金交易密码</div>
				<van-field placeholder="请输入XIBRUSH交易密码" maxlength="6" type="password" v-model.trim="payPwd" />
				<div style="padding: 10px 0px;color: rgb(63, 183, 118);font-size: 14px;" @click="nextUpdatePayPassword">
					忘记密码？
				</div>
				<van-button size="normal" style="border-radius: 5px;background-color: rgb(60,66,84);border-color: rgb(60,66,84);color: white;" @click="isOk" :loading="load">确认</van-button>
			</div>
		</van-popup>
	</div>
</template>

<script>
	let _this;
	import { Dialog } from 'vant';
	import { otc, base, safety, mine } from './../utils/api';
	export default {
		data() {
			return {
				k: '', // 凭证K值
				v: '', // 凭证V值
				type: 0, // 0.买入 1.卖出
				typeShow: '买入', // 0.买入 1.卖出
				load: false,
				imgUrl: require("./../assets/images/icon.png"),
				active: 0,
				active2: 0,
				isLoading: false,
				finished: false,
				loading: false,
				listLength: 0,
				total: 0,
				isLoading2: false,
				finished2: false,
				loading2: false,
				listLength2: 0,
				total2: 0,
				show: false,
				show2: false,
				active3: 0,
				show3: false,
				countdown: 60, // 倒计时秒数
				timer: null, // 定时器
				num: '', // 买入的数量
				price: Number(0).toFixed(2), // 交易总额
				payPwd: '', // 支付密码
				list: [], // 买入的列表
				arrayList: [], // 买入的弹窗的数据
				list2: [], // 卖出的列表
				size: 10, // 每页数量
				current: 1, // 页码
				size2: 10, // 每页数量
				current2: 1, // 页码
				centerType: ''
			}
		},
		beforeCreate() {
			_this = this;
		},
		created() {
			// 页面不需要登录就能访问切页面上有请求接口，登录和不登录的时候。需要添加此代码
			if(sessionStorage.token) {
				this.axios.defaults.headers['Authorization'] = 'bearer ' + sessionStorage.token;
			}
		},
		mounted() {
			this.getList2(); // 卖出的列表 [预加载]
			this.getCenter();
		},
		methods: {
			getCenter() { // 判断是不是代理
				mine.getPersonal().then(res => {
					this.centerType = res.data.agency;
				})
			},
			getTab(type) {
				if(type == 0) {
					this.getList();
				} else if(type == 1) {
					this.getList2();
				}
			},
			getList() { // OTC-我要买卖-列表显示(分页查询)
				otc.getAllOrder({
					"size": this.size,
					"current": this.current,
					"type": 0, // 0.买入 1.卖出
				}).then(res => {
					this.list = res.data.records;
					this.listLength = res.data.records.length;
					this.total = res.data.total;
				})
			},
			getList2() { // OTC-我要买卖-列表显示(分页查询)
				otc.getAllOrder({
					"size": this.size2,
					"current": this.current2,
					"type": 1, // 0.买入 1.卖出
				}).then(res => {
					this.list2 = res.data.records;
					this.listLength2 = res.data.records.length;
					this.total2 = res.data.total;
				})
			},
			getIcon() { // 顶部右上角的按钮
				this.show = true;
			},
			countDown() {
				if(!this.timer) {
					this.timer = setInterval(() => {
						if(this.countdown > 0 && this.countdown <= 60) {
							this.countdown--;
							if(this.countdown <= 0) {
								this.clearTime(); // 清除倒计时
								this.show2 = false;
								this.show3 = false;
								this.$toast('支付超时');
							}
						}
					}, 1000)
				}
			},
			onRefresh() {
				this.getList();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 上拉加载
				this.getList();
				// 异步更新数据
				setTimeout(() => {
					if(this.total > this.listLength) {
						this.size += 10;
						this.loading = false;
					} else {
						// 加载状态结束
						this.finished = true;
						this.loading = false;
					}
				}, 500);
			},
			onRefresh2() {
				this.getList2();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading2 = false;
				}, 500);
			},
			onLoad2() { // 上拉加载
				if(this.total2 > this.listLength2) {
					this.getList2();
				}
				// 异步更新数据
				setTimeout(() => {
					if(this.total2 > this.listLength2) {
						this.size2 += 10;
						this.loading2 = false;
					} else {
						// 加载状态结束
						this.finished2 = true;
						this.loading2 = false;
					}
				}, 500);
			},
			getBuy(type, item) { // 买入卖出下单
				safety.getTransaction().then(res => { // 判断是否设置支付密码
					if(res.code == 200) {
						if(res.data == 1) { // 1：已设置
							mine.getPersonal().then(res => {
								if(res.data.idcardVerifyStatus == 1) { // 已实名成功
									otc.getPayType().then(res => { // 判断是否设置支付方式
										if(res.data == '') {
											Dialog.confirm({
												message: '未设置可用的支付方式，请前往设置！',
												confirmButtonText: '设置',
												cancelButtonText: '取消',
												cancelButtonColor: 'white'
											}).then(() => {
												this.$router.push({
													path: '/Pay',
													query: {
														roid: 'Otc'
													}
												})
											}).catch(() => {
												this.show = false;
												this.$router.push({
													path: '/Otc'
												})
											});
										} else {
											if(type == 0) {
												this.typeShow = '买入';
											} else if(type == 1) {
												this.typeShow = '卖出';
											}
											this.type = type;
											this.arrayList = item; // 买入卖出的弹窗的数据内容
											this.clearTime(); // 清除倒计时
											this.show2 = true;
											this.countDown();
											// 清除上一次的数据
											this.num = '';
											this.payPwd = '';
											this.price = Number(0).toFixed(2);
										}
									})
								} else {
									Dialog.confirm({
										message: '实名认证未完成，请完成实名认证！',
										confirmButtonText: '实名认证',
										cancelButtonText: '取消',
										cancelButtonColor: 'white'
									}).then(() => {
										this.$router.push({
											path: '/Authentication2',
											query: {
												roid: 'Otc'
											}
										});
									}).catch(() => {
										this.$router.push({
											path: '/Otc'
										})
									});
								}
							})
						} else {
							Dialog.confirm({
								message: '您未设置支付密码，请设置支付密码！',
								confirmButtonText: '立即设置',
								cancelButtonText: '稍后设置',
								cancelButtonColor: 'white'
							}).then(() => {
								_this.$router.push({
									path: '/UpdatePayPwd',
									query: {
										type: 0,
										roid: 'Otc'
									}
								})
							}).catch(() => {
								this.$router.push({
									path: 'Otc'
								})
							});
						}
					} else {
						this.$toast(res.msg);
					}
				})
			},
			give() { // 全部收购
				if(this.arrayList.residueNum > 0) {
					this.num = this.arrayList.residueNum;
				} else {
					this.$toast({
						duration: 800,
						message: '您没有剩余的 AIDT 了~'
					});
				}
				// 计算交易总额
				this.price = Number(this.arrayList.residueNum * this.arrayList.unitPrice).toFixed(2);
			},
			giveNum() { // 当数量发生变化的时候
				if(this.arrayList.residueNum > 0) {
					// 计算交易总额
					this.price = Number(this.num * this.arrayList.unitPrice).toFixed(2);
				}
				if(this.num > this.arrayList.residueNum) {
					this.num = this.arrayList.residueNum;
					this.price = Number(this.arrayList.residueNum * this.arrayList.unitPrice).toFixed(2);
				} else {
					this.price = Number(this.num * this.arrayList.unitPrice).toFixed(2);
				}
			},
			clearTime() {
				clearInterval(this.timer);
				this.countdown = 60;
				this.timer = null;
			},
			sure() {
				if(!this.num) {
					this.$toast("数量不能为空！");
					return false;
				}
				this.show2 = false; // 关闭弹窗
				this.show3 = true;
			},
			quitDown() { // 60 秒后自动取消的点击事件
				this.show2 = false;
				this.clearTime();
			},
			quit() { // 取消按钮
				this.show3 = false;
				this.clearTime();
			},
			choseShow() { // 关闭弹出层的时候
				this.clearTime();
			},
			isOk() { // 确定按钮，下单成功后不能忘记清除定时器
				if(!this.payPwd) {
					this.$toast("支付密码不能为空！");
					return false;
				}
				this.loading = true;
				base.getCredentials().then(res => {
					this.k = res.data.k;
					this.v = res.data.v;
					otc.getBuyOrSell({
						"num": this.num,
						"encryptedData": this.rsaEncrypt(this.payPwd + ',' + this.arrayList.id + ',' + this.v),
						"key": this.k,
						"type": this.type // 0.买入 1.卖出
					}).then(res => {
						if(res.code == 200) {
							if(this.type == 0){
								Dialog.confirm({
									message: '下单成功，是否立即付款？',
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									cancelButtonColor: 'white'
								}).then(() => {
									_this.$router.push({
										path: '/prePayment',
										query: {
											id: res.data.id,
											roid: 'Otc'
										}
									})
								}).catch(() => {
									this.getList(); // 买入的列表
									this.getList2(); // 卖出的列表
								});
							}else{
								this.$toast(res.msg);
								this.getList(); // 买入的列表
								this.getList2(); // 卖出的列表
							}
						}else{
							this.$toast(res.msg);
						}
						this.loading = false;
						this.num = '';
						this.price = Number(0).toFixed(2);
						this.payPwd = '';
						this.show3 = false;
						this.clearTime();
					})
				})
			},
			merchantOrder() { // 商家订单
				safety.getTransaction().then(res => { // 判断是否设置支付密码
					if(res.code == 200) {
						if(res.data == 1) { // 1：已设置
							mine.getPersonal().then(res => {
								if(res.data.idcardVerifyStatus == 1) { // 已实名成功
									otc.getPayType().then(res => { // 判断是否设置支付方式
										if(res.data == '') {
											Dialog.confirm({
												message: '未设置可用的支付方式，请前往设置！',
												confirmButtonText: '设置',
												cancelButtonText: '取消',
												cancelButtonColor: 'white'
											}).then(() => {
												this.$router.push({
													path: '/Pay',
													query: {
														roid: 'Otc'
													}
												})
											}).catch(() => {
												this.show = false;
												this.$router.push({
													path: '/Otc'
												})
											});
										} else {
											this.$router.push({
												path: '/MerchantOrder'
											})
										}
									})
								} else {
									Dialog.confirm({
										message: '实名认证未完成，请完成实名认证！',
										confirmButtonText: '实名认证',
										cancelButtonText: '取消',
										cancelButtonColor: 'white'
									}).then(() => {
										this.$router.push({
											path: '/Authentication2',
											query: {
												roid: 'Otc'
											}
										});
									}).catch(() => {
										this.$router.push({
											path: '/Otc'
										})
									});
								}
							})
						} else {
							Dialog.confirm({
								message: '您未设置支付密码，请设置支付密码！',
								confirmButtonText: '立即设置',
								cancelButtonText: '稍后设置',
								cancelButtonColor: 'white'
							}).then(() => {
								_this.$router.push({
									path: '/UpdatePayPwd',
									query: {
										type: 0,
										roid: 'Otc'
									}
								})
							}).catch(() => {
								this.$router.push({
									path: 'Otc'
								})
							});
						}
					} else {
						this.$toast(res.msg);
					}
				})
			},
			orderRecord() { // 订单管理
				this.$router.push({
					path: '/OrderRecord'
				})
			},
			nextUpdatePayPassword() { // 忘记支付密码
				this.$router.push({
					path: '/UpdateMb'
				});
			}
		},
		destroyed() {
			this.clearTime();
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .van-tabs__nav--card {
		margin: 0px 60px;
		border: 1px solid transparent;
	}
	
	/deep/ .van-tabs__nav--card .van-tab.van-tab--active {
		color: white;
		background-color: rgb(77, 89, 126);
	}
	
	/deep/ .van-tabs__nav {
		background-color: rgb(33, 38, 57);
	}
	
	/deep/ .van-tabs__nav--card .van-tab {
		color: rgb(133, 141, 172);
		border-right: 0;
	}
	
	/deep/ .van-icon,
	.van-icon::before {
		z-index: 100;
		position: absolute;
		right: 5px;
		top: 1px;
	}
	
	/deep/ .buy .van-tabs__wrap {
		right: inherit;
		padding-left: 15px;
		color: white;
	}
	
	/deep/ .unbuy .van-tabs__wrap {
		right: inherit;
		padding-left: 15px;
		color: white;
	}
	
	/deep/ .van-tabs__nav {
		background: transparent;
	}
	
	/deep/ .van-tab--active {
		color: white;
	}
	
	/deep/ .van-tabs__line {
		height: 2px;
		bottom: 25px;
		background-color: #00dd94;
	}
	
	/deep/ .van-tab {
		min-width: inherit;
	}
	
	/deep/ .van-card__thumb {
		width: 25px;
		height: 25px;
		margin-top: 8px;
	}
	
	/deep/ .van-card__bottom {
		position: absolute;
		right: 0;
		top: 10px
	}
	
	/deep/ .van-button--small {
		height: 25px;
		line-height: 23px;
		margin-top: 30px;
	}
	
	.pad {
		padding: 3px 0px;
	}
	
	.van-card {
		background: transparent;
		color: white;
	}
	
	.van-card__content {
		border-bottom: 1px solid rgb(33, 38, 57);
		padding: 5px 0px;
		padding-bottom: 15px;
	}
	
	/deep/ .van-tabs__nav--card .van-tab {
		background: rgb(33, 38, 57);
	}
	
	/deep/ .van-card:not(:first-child) {
		margin-top: 0px;
	}
	
	.menu {
		padding: 10px;
		background: #43495e;
		border-radius: 3px;
		color: white;
	}
	
	/deep/ .menu.van-popup--center {
		top: 15%;
		left: initial;
		right: -55px;
	}
	
	/deep/ .buym.van-popup {
		background: rgb(34, 38, 56);
		color: white;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
	}
	
	/deep/ .buyc .van-tabs__wrap {
		right: inherit;
		color: white;
	}
	
	/deep/ .buyc .van-tab {
		margin-right: 20px;
	}
	
	/deep/ .buyc .van-tabs__line {
		background: rgb(71, 170, 105);
	}
	
	/deep/ .buyc .van-button--plain {
		background-color: transparent;
	}
	
	/deep/ .buyc .van-button--small {
		margin-top: 0px;
	}
	
	/deep/ .buyc .van-hairline--surround::after {
		border: 0;
	}
	
	/deep/ .buyc .van-tabs__content {
		padding-top: 10px;
	}
	
	/deep/ .buyc .van-cell:not(:last-child)::after {
		border: 0;
	}
	
	/deep/ .buyc .van-button {
		height: 35px;
		line-height: 35px;
	}
	
	/deep/ .buyc .van-tabs__line {
		top: 35px;
	}
	
	/deep/ .buyo.van-popup {
		background: rgb(34, 38, 56);
		color: white;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
	}
	
	/deep/ .buyo .van-button--small {
		margin-top: 0px;
	}
	
	/deep/ .buyo .van-cell:not(:last-child)::after {
		border: 0;
	}
	
	/deep/ .buyo .van-button {
		height: 35px;
		line-height: 35px;
	}
	
	/deep/ .buyc .van-cell {
		padding: 5px 15px;
	}
</style>